<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
  <div id="div1">
   <input id="username" type="text" name="" placeholder="用户名" onblur="fun()">
   <span id="userspan">6-18个字符，可使用字母/数字/下划线/需字母开头</span>
   <input id="password" type="password" name="" placeholder="输入密码">
  </div>
</body>
</html>

<style type="text/css">
 #div1{
  width: 400px;height: 200px;background: lightblue;border: 1px solid #000;text-align: center;display: flex;
  flex-direction: column;justify-content: center;align-content: center; }

 #div1 input{
  width: 180px;height: 30px;margin-top: 20px;
  }
 #div1 span{
  font-size: 10px;color: red;margin-top: 10px;
 }
</style>

<script type="text/javascript">
 function fun() {
  var username = document.getElementById("username");
  var userspan = document.getElementById("userspan");

  var ovalue = username.value
  if (ovalue.length<6 || ovalue>18) {
   userspan.innerHTML ="!长度应该是6-18个字符"
  }else if((ovalue[0]>="a" && ovalue[0]<="z" || ovalue[0]>="A" && ovalue[0]<="Z")) {
   userspan.innerHTML ="!首字符不是英文字母"

  }
 }
</script>
